<!-- 消息提醒页面 -->
<template>
	<view>
		<news-nav-bar :tabBars='tabBars' :tabIndex='tabIndex' @TabClick='tabClick'></news-nav-bar>
		<swiper class="swiper" :style="{'height':swiperHeight+'px'}" :current='tabIndex' @change='swiperChange'>
			<!-- 关注 -->
			<swiper-item>
				<scroll-view class="scroll" scroll-y show-scrollbar='false' style="height: 100%;" @scrolltolower='loadmore()'>
					<view class="common-list">
						<block v-for="(items,indexs) in list" :key="indexs">
							<common-list :items='items' :index="indexs"></common-list>
						</block>
					</view>
					<!-- 上拉加载更多 -->
					<template>
						<view @tap='loadmore()'>
							<loadfooter :loadText='list.length<=1?"点击加载更多":loadText'></loadfooter>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
			<!-- 话题 -->
			<swiper-item>
				<scroll-view class="scroll" scroll-y show-scrollbar='false' style="height: 100%;">
					<view class="search-input">
						<input  placeholder-class='iconfont iconiconfonticonfontsousuo1' placeholder="搜索内容" placeholder-style='text-align: center;color:#949494;font-size: 28rpx;' />
					</view>
					<view class="swiper">
						<swiper :circular='true' class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
							<swiper-item>
								<view class="swiper-item uni-bg-red">A</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-green">B</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-blue">C</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="classify">
						<view class="classify_title">
							<view class="titleInfo">
								热门分类
							</view>
							<view class="more">
								更多
								<view class="iconfont iconxianshigengduo" style="transform: rotate(-90deg);"></view>
							</view>
						</view>
						<view class="classify_list">
							<block v-for="(item,index) of navbar" :key='index'>
								<view class="classify_item">
									{{item.name}}
								</view>
							</block>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import newsNavBar from '@/components/news/news-nav-bar.vue'
	import commonList from '@/components/common-list.vue'
	import loadfooter from '@/components/loadfooter.vue'
	export default {
		data() {
			return {
				tabBars: [{
						id: 0,
						text: '关注'
					},
					{
						id: 1,
						text: '话题'
					}
				],
				list: [
					// 图文
					{
						userpic: '/static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, // 0：男 1：女
						age: 23,
						isguanzhu: true,
						title: '标题',
						titlepic: '/static/demo/datapic/11.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20

					},
					// 文字列表
					{
						userpic: '/static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, // 0：男 1：女
						age: 19,
						isguanzhu: false,
						title: '标题',
						titlepic: '',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20

					},
					// 视频
					{
						userpic: '/static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, // 0：男 1：女
						age: 15,
						isguanzhu: false,
						title: '标题',
						titlepic: '/static/demo/datapic/11.jpg',
						video: {
							looknum: "20w",
							long: '2:17'
						},
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					// 分享
					{
						userpic: '/static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, // 0：男 1：女
						age: 31,
						isguanzhu: false,
						title: '标题',
						titlepic: '',
						video: false,
						share: {
							title: '我是分享标题',
							titlepic: '/static/demo/datapic/11.jpg',
						},
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20

					},
				],
				//  列表项目
				tabIndex: 0,
				swiperHeight: 0,
				type: 'forward',
				loadText: '上拉加载更多',
				navbar:[
					{
						name:'最新'
					},
					{
						name:'游戏'
					},
					{
						name:'情感'
					},
					{
						name:'打卡'
					},
					{
						name:'故事'
					},
					{
						name:'喜爱'
					},
				]
			}
		},
		onLoad() {

		},
		mounted() {
			setTimeout(() => {
				this.contentHeight()
			}, 0)
		},
		onShow(){
		},
		methods: {
			tabClick(index) {
				this.tabIndex = index
			},
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},
			contentHeight() {
				//  初始化swiper高度
				const query = uni.createSelectorQuery().select('.navbar');
				query.boundingClientRect(data => {
					this.swiperHeight = uni.getSystemInfoSync().windowHeight - data.height;
					console.log(uni.getSystemInfoSync())
				}).exec();

			},
			loadmore(index) {
				// loadText : 上拉加载更多/加载中/没有更多
				if (this.loadText !== '上拉加载更多') {
					return
				}
				this.loadText = '加载中...'
				setTimeout(() => {
					let obj = {
						userpic: '/static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, // 0：男 1：女
						age: 31,
						isguanzhu: false,
						title: '标题',
						titlepic: '',
						video: false,
						share: {
							title: '我是分享标题',
							titlepic: '/static/demo/datapic/11.jpg',
						},
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20

					}
					this.list.push(obj)
					this.loadText = '上拉加载更多'
				}, 1000)
				// 没有更多数据
			},
		},
		components: {
			newsNavBar,
			commonList,
			loadfooter
		}
	}
</script>

<style>
	.common-list {
		position: relative;
		padding: 0 25rpx 0 40rpx;
		box-sizing: border-box;
	}

	/* 话题页面 */
	.search-input {
		background-color: #f4f4f4;
		margin: 18rpx;
		height: 70rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.search-input input {
		height: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.topic-swiper{
		margin: 0 18rpx 10rpx 18rpx;
		background: #007AFF;
		height: 250rpx;
		border-radius: 15rpx;
	}
	.classify{
		border-top: 1rpx solid #ececec;
		border-bottom: 1rpx solid #ececec;
		box-sizing: border-box;
		padding: 28rpx 18rpx;
		display: flex;
		flex-direction: column;
	}
	.classify > view{
		flex: 0 0 auto;
	}
	.classify .classify_title{
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #1a1a1a;
		margin-bottom: 30rpx;
	}
	.classify .classify_title .more{
		color: #d0d0d0;
	}
	.classify .classify_title >view{
		display: flex;
	}
	.classify .classify_list{
		display: flex;
		padding-left: 5rpx;
		font-size: 24rpx;
	}
	.classify .classify_list .classify_item{
		flex: 1;
		text-align: center;
		margin-right:15rpx;
		background: #f7f7f7;
		padding: 15rpx 0;
		color: #848484;
		border-radius: 10rpx;
	}
	.classify .classify_list .classify_item:last-child{
		margin: 0;
	}
</style>
